import React, { useState, useEffect } from 'react'
import { IDefenceTags, IDefenceRows, IDefenceQuery } from '@/utils/interface'
import { getDefenceTags, getDenfenceRows } from '@/services/index'
import useStore from '@/context/useStore'
import styles from './defence.less'
import classNames from 'classnames'
import { Input, Button, Table } from 'antd'
import { SearchOutlined, FormOutlined, DeleteOutlined, SnippetsOutlined, EyeOutlined, CopyOutlined } from '@ant-design/icons'
import { Link } from 'umi'

// 专业状态
const status = ['全部', '未开始', '进行中', '已结束']
// 表格表头
const columns = [
    {
        title: '名称',
        dataIndex: 'degenceName',
    },
    {
        title: '专业',
        dataIndex: 'majorName',
    },
    {
        title: '班级/计划',
        render: (row: IDefenceRows) => <div>
            <p>{row.className?`${row.className}`:""}</p>
            <p>{row.planName?`${row.planName}`:""}</p>
        </div>

    },
    {
        title: '发起人',
        dataIndex: 'defenceAuthorName',
    },
    {
        title: '开始/截止时间',
        render: (row: IDefenceRows) => <div>
            <p>开始{`${row.defenceCreateTime}`}</p>
            <p>截止{`${row.defenceEndTime}`}</p>
        </div>

    },
    {
        title: '状态',
        render: (row: IDefenceRows) => <span className={styles[`status${row.defenceStatus}`]}>{status[Number(row.defenceStatus)]}</span>
    },
    {
        title: '操作',
        render: (row: IDefenceRows) => {
            
            
            if (row.defenceStatus == '1') {
         
                return <div className={styles.action}>
                    <Link to={`/teachers/addDefence?defenceId=${row.defenceId}&see=false`}>
                        <FormOutlined style={{ color: '#00c3ff',fontSize:'16px',marginLeft:'15px' }} />
                    </Link>
                    <DeleteOutlined style={{ color: '#00c3ff',fontSize:'16px',marginLeft:'15px' }} onClick={()=>{
                        
                    }} />
                </div>
            }
            else if (row.defenceStatus == '2') {
                return <div className={styles.action}>
                    <Link to={`/teachers/defenceScore?defenceId=${row.defenceId}&see=false`}>
                        <CopyOutlined style={{ color: '#00c3ff',fontSize:'16px',marginLeft:'15px' }} />
                    </Link>
                    <Link to={`/teachers/teachers/scoreHistory?defenceId=${row.defenceId}`}>
                        <SnippetsOutlined style={{ color: '#00c3ff',fontSize:'16px',marginLeft:'15px' }} />
                    </Link>
                </div>
            }
            else if (row.defenceStatus ==    '3') {
                return <div className={styles.action}>
                    <Link to={`/teachers/addDefence?defenceId=${row.defenceId}&see=true`}>
                        <EyeOutlined style={{ color: '#00c3ff',fontSize:'16px',marginLeft:'15px' }} />
                    </Link>
                    <Link to={`/teachers/teachers/scoreHistory?defenceId=${row.defenceId}`}>
                        <SnippetsOutlined style={{ color: '#00c3ff',fontSize:'16px',marginLeft:'15px' }} />
                    </Link>
                </div>
            }
        }
    },
];
const defence: React.FC = (props) => {
    // 专业标签
    let [defenceTags, setDefenceTags] = useState<IDefenceTags[]>([])
    // 专业标签初始值
    let [curTags, setCurTags] = useState('')
    // 专业状态初始值
    let [defenceStatus, setDefenceStatus] = useState(0)
    // 输入框的值
    let [title, setTitle] = useState('')
    // 模糊搜索的值
    let [searchTitle, setSearchTitle] = useState('')
    // 表格数据
    let [dataSource, setDataSource] = useState<IDefenceRows[]>([])
    let queryParams: IDefenceQuery = {
        pageNum: 0,
        pageSize: 10,
        searchTitle: '',
        defenceMjorId: '',
        defenceStatus: '',
        defenceCreateTime:'',
        defenceEndTime:'',
        defenceAuthor:'',
        defenceId:'',
        defenceAuthorName:'',
        degenceName:''
    }

    let { tags } = useStore()

    // 发起请求获取专业标签
    useEffect(() => {
        tags.getDefenceTags()

    }, [])

    // 发起请求获取答辩列表
    useEffect(() => {
        if (defenceStatus) {
            queryParams = { ...queryParams, searchTitle, defenceMjorId: curTags,defenceStatus: defenceStatus  }
        } else {
            queryParams = { ...queryParams, searchTitle, defenceMjorId: curTags ,defenceStatus: '' as unknown as number}
        }
        getDenfenceRows(queryParams).then(res => {
            if (res.code === 200) {
                setDataSource(res.rows)
            }
        })
    }, [curTags, defenceStatus, searchTitle])

    return <div className={styles.ant_layout_content}>
        <div className={styles.head}>
            <span style={{ color: '#80879b' }} >答辩</span>
            <span style={{ color: '#C0C4CC' }}>/</span>
            <span style={{ color: '#303849' }}>答辩管理</span>
        </div>
        {/* 标签 */}
        <div className={styles.tags}>
            <section className={styles.sec1}>
                <section>
                    <span>专业：</span>
                    <ul className={styles.statusList}>
                        {
                            [{ id: '', name: '全部' }, ...tags.defenceTags].map(item => {
                                return <span key={item.id} className={item.id === curTags ? classNames(styles.span, styles.active) : styles.span} onClick={e => setCurTags(item.id)}>{item.name}</span>
                            })
                        }
                    </ul>
                </section>
                <section>
                    <span>状态：</span>
                    <ul className="statusList">
                        {
                            status.map((item, index) => {
                                return <span key={index} className={index === defenceStatus ? classNames(styles.span, styles.active) : styles.span} onClick={e => setDefenceStatus(index)}>{item}</span>
                            })
                        }
                    </ul>
                </section>
            </section>
        </div>
        {/* 下面表格渲染 */}
        <div className={styles.pro_list}>
            <div className={styles.pro_operation}>
                <Input className={styles.input2} placeholder="搜索名称" suffix={<SearchOutlined onClick={() => setSearchTitle(title)} />} value={title} onChange={e => setTitle(e.target.value)} onKeyDown={e => {
                    if (e.keyCode === 13) {
                        setSearchTitle(title)
                    }
                }} />
                <Link to='/teachers/addDefence'>
                    <Button type='primary' className={styles.button}>+ 发起答辩</Button>
                </Link>
            </div>
            <Table rowKey='defenceId' columns={columns}  dataSource={dataSource}   />
        </div>
    </div>
}
export default defence